<html>  
  <head>  
        <meta charset="utf-8">  
        <title>13.5.1 三角剖分</title>  
  <style>

	.node {
		fill: black;
	}

	.link {
		stroke: #888;
		stroke-width: 1;
	}

  </style>
  </head> 

<body>
<script src="../../d3/d3.min.js" charset="utf-8"></script>  
<script>


	var width  = 500;
	var height = 500;
	
	var svg = d3.select("body")
				.append("svg")
			    .attr("width", width)
			    .attr("height", height);
	

	var nodes = [];
	var links = [];

	for (var i = 0; i < 100; i++) {
		nodes.push({
			x: Math.random() * width,
			y: Math.random() * height
		});
	};

	var voronoi = d3.geom.voronoi()
					.x(function(d){
						return d.x;
					})
					.y(function(d){
						return d.y;
					});

	//var triangles = voronoi.triangles(nodes);

	/*triangles.forEach(function(d,i){
		links.push( edge( d[0] , d[1] ) );
		links.push( edge( d[1] , d[2] ) );
		links.push( edge( d[2] , d[0] ) );
	});*/

	links = voronoi.links(nodes);

	var lines = svg.selectAll(".link")
					.data(links)
					.enter()
					.append("line")
					.attr("class","link")
					.attr("x1",function(d){ return d.source.x; })
					.attr("y1",function(d){ return d.source.y; })
					.attr("x2",function(d){ return d.target.x; })
					.attr("y2",function(d){ return d.target.y; });

	var circles = svg.selectAll(".node")
					.data(nodes)
					.enter()
					.append("circle")
					.attr("class","node")
					.attr("cx",function(d){ return d.x; })
					.attr("cy",function(d){ return d.y; })
					.attr("r",5);


	function edge(a, b) {
		return {
			source: a,
			target: b
		};
	}


</script>
	
</body>  
</html>  